<template>
  <div class="history-record">
    <div>
      <h2>热点地区为您推荐</h2>
    </div>
    <swiper class="swiper" :options="swiperOption">
      <swiper-slide>
        <div class="hisc">
          <i class="el-icon-s-home">
            <div>巴塞罗那景点<br /><span>巴塞隆纳省</span></div>
          </i>
        </div>
      </swiper-slide>
      <swiper-slide>
        <div class="hisc">
          <i class="el-icon-s-home">
            <div>
              圣佩德罗-德阿塔卡马酒店<br /><span>安托法加斯塔大区</span>
            </div>
          </i>
        </div>
      </swiper-slide>
      <swiper-slide>
        <div class="hisc">
          <i class="el-icon-s-home">
            <div>欧洲餐厅<br /><span>世界</span></div>
          </i>
        </div>
      </swiper-slide>
      <swiper-slide>
        <div class="hisc">
          <i class="el-icon-s-home">
            <div>欧洲景点<br /><span>世界</span></div>
          </i>
        </div>
      </swiper-slide>
      <swiper-slide>
        <div class="hisc">
          <i class="el-icon-s-home">
            <div>巴塞罗那景点<br /><span>巴塞隆纳省</span></div>
          </i>
        </div>
      </swiper-slide>
      <swiper-slide>
        <div class="hisc">
          <i class="el-icon-s-home">
            <div>巴塞罗那景点<br /><span>巴塞隆纳省</span></div>
          </i>
        </div>
      </swiper-slide>

      <div class="swiper-scrollbar" slot="scrollbar"></div>
      <div class="swiper-button-prev" slot="button-prev">
        <i class="el-icon-remove"></i>
      </div>
      <div class="swiper-button-next" slot="button-next">
        <i class="el-icon-circle-plus"></i>
      </div>
    </swiper>
  </div>
</template>
<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
  name: "swiper-example-loop-group",
  title: "Loop mode with multiple slides per group",
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      swiperOption: {
        slidesPerView: "auto",
        spaceBetween: 30,
        slidesPerGroup: 3,
        loop: true,
        loopFillGroupWithBlank: true,
        scrollbar: {
          el: ".swiper-scrollbar",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.history-record {
  width: 1280px;
  margin: 0 auto;
  --swiper-navigation-size: 0;

  .swiper-slide {
    width: auto;
  }

  .swiper {
    padding-bottom: 20px;
    width: 100%;

    .hisc {
      border: 1px solid gray;
      border-radius: 12px;
      padding: 0 20px;
      line-height: 70px;

      &:hover {
        background-color: black;
        color: white;
        border-color: black;
      }

      .el-icon-s-home {
        font-size: 28px;
      }

      div {
        font-size: 16px;
        font-weight: bold;
        float: right;
        height: 50px;

        text-align: left;
        margin-left: 10px;

        span {
          font-size: 12px;
        }
      }
    }

    .el-icon-circle-plus {
      font-size: 30px;
      color: black;
      margin-right: -12px;
      margin-bottom: 15px;
    }

    .el-icon-remove {
      font-size: 30px;
      color: black;
      margin-left: -12px;
      margin-bottom: 15px;
    }

    .swiper-slide {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      font-weight: bold;
      font-size: 20px;
      background-color: white;
    }
  }
}
</style>
